<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<html:header title="库存盘点选择商品">

    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <style type="text/css">
        a{
            color: #01AAED;
            text-decoration: none;
            font-size: 12px;
        }
        a:hover {
            color: #FF5722;
        }

        .layui-table-cell {
            overflow: visible !important;
        }
    </style>

    <script>
        let houseId = "${houseId}";

        jQuery(function () {
            //需要检查库存
            if (houseId == "") {
                errTip("请选择仓库");
                parent.layer.close(parent.layer.getFrameIndex(window.name));
                return;
            }

            ajaxSelect("${baseUrl}goods/type/getAll.action","typeId","商品分类");

            $("#cancel").click(function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });

        });

        layui.use(['form','table','layer'], function () {
            let $ = layui.jquery,
                form = layui.form,
                table = layui.table;

            $("#sure").click(function () {
                let data = [];
                for(let key in selected_map){
                    let d = selected_map[key];
                    d.number = d.stockNum;
                    if (emptyList(d.goodsSnList)) {
                        d.goodsSnList=[];
                    }
                    data.push(d);
                }

                window.parent.getSelectGoods(data);
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });

            table.on('checkbox(table)', function(obj){
                console.log(obj.checked); //当前是否选中状态
                console.log(obj.data); //选中行的相关数据
                console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
                if (obj.type == 'one') {
                    if (obj.checked) {
                        setDataToSelectedList(obj.data);
                    } else {
                        deleteSelectedById(obj.data.id);
                    }
                } else {
                    $.each(table.cache.table, function (i,d) {
                        if (obj.checked) {
                            setDataToSelectedList(d);
                        } else {
                            deleteSelectedById(d.id);
                        }
                    });
                }
                $("#selectNumber").html(getSelectedListLength());
            });

            form.on('submit(search)', function (data) {
                table.reload('table',{
                    where: data.field
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                return false;
            });

            let url = "${baseUrl}goods/goods/listVoForCheckHouse.action?houseId=${houseId}";
            table.render({
                id:'table',
                elem: '#table',
                height:500,
                url: url,
                where : {
                    status :1,
                    time:(new Date()).valueOf()
                },
                cols: [[
                    {type:'checkbox'},
                    {field: 'name', minWidth: 130, title: '名称/规格',style:"font-size:12px;",templet:function (d) {
                            let sn = d.sn ? ' <span class="layui-badge layui-bg-cyan">sn</span>':'';
                            return genGoodsName(d.name,d.norms)+sn;
                        }},
                    {field:'unit', width: 120, title: '单位',style:"font-size:12px;", templet:function (d) {
                            return d.goodsUnitVoList[0].unit.name;
                        }},
                    {width: 100, title: '库存',templet: function(d){
                        if (d.stockNum == null) {
                            return '<span class="stockNum">0</span>';
                        }
                        return '<span class="stockNum">'+d.stockNum+'</span>';
                    }},
                ]],
                limit: 10,
                page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    ,groups: 5 //只显示 5 个连续页码
                    ,first: false //不显示首页
                    ,last: false //不显示尾页
                },
                done : function (res, curr, count) {
                    //检查复选框
                    $.each(res.data, function (i,d) {
                        if (getSelectedById(d.id) != null) {
                            $('tr[data-index="'+i+'"]').find(".layui-form-checkbox").addClass("layui-form-checked");
                        }
                    });
                }
            });
        });



        let selected_map = {};//已选择的商品列表 key是id, value是goods
        function getSelectedById(id) {
            if (selected_map[id] != undefined) {
                return selected_map[id]
            }
            return null;
        }

        function deleteSelectedById(id) {
            delete selected_map[id];
        }

        function  getSelectedListLength() {
            return Object.keys(selected_map).length;
        }

        function setDataToSelectedList(d) {
            selected_map[d.id] = d;
        }

        //已被使用的sn的map，key为goodsId
        let used_sn_map = {};
        function setUsedSnMap(usedSnMap) {
            used_sn_map = usedSnMap;
        }
    </script>

</html:header>
<body style="background-color: #ffffff">
<div style="padding: 20px;">
    <form class="layui-form layui-form-pane" action="">
        <input type="hidden" name="status" value="1">
        <input type="hidden" name="sn" value="${sn}">
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">商品分类</label>
                <div class="layui-input-inline">
                    <select name="typeId"></select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">其他信息</label>
                <div class="layui-input-inline">
                    <input type="text" id="search" name="search" style="font-size: 12px;" placeholder="编号、名称、规格、属性、条形码" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon layui-icon-search"></i></a>
            </div>
        </div>
    </form>
    <hr>
    <table class="layui-hide" id="table" lay-filter="table"></table>
    <hr>
    <div style="overflow: hidden;">
        <div style="float:left">
            已选<span id="selectNumber" style="color: #FF5722">0</span>个商品
        </div>
        <div style="float: right">
            <button class="layui-btn" id="sure">确认</button>
            <button class="layui-btn layui-btn-primary" id="cancel">取消</button>
        </div>
    </div>
</div>
</body>
<html:loading/>
</html>